<template>
	<view class='more'>
		<NavBar title="灵感周边" :isBack="true"></NavBar>
		<view class="content">
			<!-- search start -->
			<view class="search">
				<Search v-model="title" @change="loadMoregoodsData"></Search>
				<view class="history">
					<view class="title">
						搜索历史
					</view>
					<view class="list">
						<view v-if="!searchHistory.length">暂无搜索记录</view>
						<view class="item" v-for="item in searchHistory" :key="item.id">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			<!-- search end -->
			<!-- s -->
			<view class="goods-item">
				<up-empty mode="list" v-if="!moreGoodsList.length"></up-empty>
				<view class="list">
					<view v-for="(item, index) in moreGoodsList" :key='index' class="item"
						@click="$gotoUrl('/pages/index/goodDetail?id=' + item.id)">
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="cont">
							<view class='subtitle'>{{ item.title }}</view>
							<view class='price'>¥ {{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- e -->
		</view>
	</view>
</template>

<script setup>
import Search from '@/components/Search.vue'
import { getMoregoodsList, getSearchHistory } from '@/api/index.js'
import { reactive, toRefs } from 'vue'

const state = reactive({
	title: '',
	moreGoodsList: [],
	searchHistory: [],
})

async function loadMoregoodsData () {
	uni.showLoading({ title: '加载中' })
	const res = await getMoregoodsList({ type: 2, title: state.title })
	state.moreGoodsList = res.data.data
	uni.hideLoading()

}

async function loadSearchHistory () {
	const res = await getSearchHistory({ type: 2 })
	state.searchHistory = res.data.data
}


loadMoregoodsData()
loadSearchHistory()


const { moreGoodsList, searchHistory, title } = toRefs(state)
</script>

<style lang="scss">
.more {
	.content {
		border-radius: 22rpx 22rpx 0rpx 0rpx;
		padding: 36rpx;
		position: relative;
		z-index: 1;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);

		.search {
			.title {
				padding-top: 28rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			.list {
				margin: 35rpx 0;
				display: flex;
				align-items: center;
				gap: 22rpx;

				.item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 145rpx;
					height: 50rpx;
					background: #F5F5F5;
					border-radius: 28rpx 28rpx 28rpx 28rpx;
				}
			}
		}

		.goods-item {

			.list {
				display: flex;
				gap: 34rpx;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 321rpx;
					background: #fff;
					overflow: hidden;
					border-radius: 22rpx;

					image {
						width: 100%;
						height: 321rpx;
					}

					.cont {
						padding: 24rpx;
					}

					.subtitle {
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						line-height: 33rpx;
						margin-top: 8rpx;
					}

					.price {
						font-weight: 800;
						font-size: 30rpx;
						color: #FF0000;
						line-height: 35rpx;
						margin-top: 20rpx;
						margin-bottom: 4rpx;
					}
				}
			}
		}
	}
}
</style>
